@import './dark.scss';
@import './bright.scss';

/* * * * * * * * * *\
 *                 *
 *      THEMES     *
 *                 *
\* * * * * * * * * */

$themes: (
    // 亮色主题
    bright: $bright,
    // 暗色主题
    dark: $dark,
);
// @mixin themify($themes: $themes, $isParent: 1) {
//     @each $theme-name,$map in $themes {
//         @if $isParent == 1 {
//             .theme-#{$theme-name} & {
//                 $theme-map: () !global;
//                 @each $key,
//                 $value in $map {
//                     $theme-map: map-merge($theme-map, ($key: $value)) !global;
//                 }
//                 @content;
//                 $theme-map: null !global;
//             }
//         } @else {
//             .theme-#{$theme-name} {
//                 $theme-map: () !global;
//                 @each $key,
//                 $value in $map {
//                     $theme-map: map-merge($theme-map, ($key: $value)) !global;
//                 }
//                 @content;
//                 $theme-map: null !global;
//             }
//         }
//     }
// }

// @function themed($key, $themeMap: $theme-map) {
//     @return map-get($themeMap, $key);
// }


/* * * * * * * * * *\
 *                 *
 *     主 题 色    *
 *                 *
\* * * * * * * * * */


$mainColor:  (
    dark: (
        bg-primary: #212C3D,
        text-primary: #FFF,
    ),
    bright: (
        bg-primary: #CCC,
        text-primary: #333,
    ),
    blue: (
        bg-primary: #1DA1F2,
        text-primary: #FFF,
    ),
    yellow: (
        bg-primary: #FFAD1F,
        text-primary: #FFF,
    ),
    powder: (
        bg-primary: #E0245E,
        text-primary: #FFF,
    ),
    purple: (
        bg-primary: #794BC4,
        text-primary: #FFF,
    ),
    orange: (
        bg-primary: #F45D22,
        text-primary: #FFF,
    ),
    green: (
        bg-primary: #17BF63,
        text-primary: #FFF,
    )
);
@each $main-name,$map in $mainColor {
    #{'.theme-color-' + $main-name} {
        @each $key,$value in $map {
            #{'--m-color-' + $key}: $value;
            @each $i,$v in (1, 2, 5, 7) {
                #{'--m-color-' + $key + '-' + $i}: darken($value, $i * 5);
            }
            #{'--m-color-gray-' + $key}: desaturate($value, 70%);
            #{'--m-color-opacity-8-' + $key}: rgba($value, .8);
            #{'--m-color-opacity-5-' + $key}: rgba($value, .5);
            #{'--m-color-opacity-2-' + $key}: rgba($value, .2);
        }
    }
}

@each $theme-name,$map in $themes {
    #{'.theme-' + $theme-name}{
        @each $key,$value in $map {
            #{'--c-' + $key}: $value;
        }
    }
}